<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <title>Flatten terrain demo</title>
</head>
<body>
    <div>
        Flatten terrain demo <a href="https://github.com/w3reality/three-geo/tree/master/examples/flat/index.html">Source Code</a>
    </div>
    <canvas id="canvas" style="width: 100%; height: 100%;"></canvas>

    <script type="module">
    import Stats from '../deps/three/examples/jsm/libs/stats.module.js';
    import { OrbitControls } from '../deps/three/examples/jsm/controls/OrbitControls.js';

    (async () => {
        window.THREE = await import('../deps/three/build/three.module.js');
        const Threelet = (await import('../deps/threelet.esm.js')).default;

        const ThreeGeo = (await import('../../dist/three-geo.esm.js')).default;
        // const ThreeGeo = (await import('../../target/three-geo.esm.dev.js')).default;

        //

        const threelet = new Threelet({
            canvas: document.getElementById("canvas"),
            // optAxes: false,
        });
        threelet.setup('mod-controls', OrbitControls);
        // threelet.setup('mod-stats', Stats);

        const { scene, render } = threelet;
        render(); // first time

        const ioToken = 'pk.eyJ1IjoiamRldmVsIiwiYSI6ImNqemFwaGJoZjAyc3MzbXA1OGNuODBxa2EifQ.7M__SgfWZGJuEiSqbBXdoQ';
        const tgeo = new ThreeGeo({
            // tokenMapbox: '********', // <---- set your Mapbox API token here
            tokenMapbox: ioToken,
        });

        if (tgeo.tokenMapbox === ioToken && window.location.origin !== 'https://w3reality.github.io') {
            const warning = 'Please set your own Mapbox API token in the ThreeGeo constructor.';
            alert(warning);
            throw warning;
        }

        const origin = [46.5763, 7.9904];
        const radius = 5.0;

        //

        const terrain = await tgeo.getTerrainRgb(origin, radius, 12);
        scene.add(terrain);
        terrain.children.forEach(mesh => {
            // To get more 'lightweight' flat terrain, you might want to try [this](https://github.com/w3reality/three-geo/issues/19#issuecomment-640161898)
            const position = mesh.geometry.attributes.position;
            const arr = position.array;
            for (let i = 0; i < arr.length; i += 3) {
                arr[i+2] = 0; // set z value (height) to zero
            }
            position.needsUpdate = true;

            mesh.rotation.x = - Math.PI/2;
            mesh.material.side = THREE.DoubleSide;
        });
        render();
    })();
    </script>
</body>
</html>
